<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 100px;
        height: 200px;
        background-color: red;
        position: relative;
    }
    .sanjiao {  
        width: 0;
        height: 0;
        border: 10px transparent solid;
        border-bottom-color: red;
        position: absolute;
        top: -20px;
        left: 5px;
    }
    input,textarea {
        outline: none;
    }
    textarea {
        resize: none;
    }
    .img {
        border: 2px solid red;
    }
    img {
        vertical-align: bottom;
    }
    .hidden {
        width: 50px;
        height: 50px;
        border: 2px solid red;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hidden1 {
        width: 50px;
        height: 50px;
        border: 2px solid red;
        /* white-space: nowrap; */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>
<body>
    <div class="box">
        <div class="sanjiao">

        </div>
    </div>
    <ul>
        <li style="cursor: default">你是猪</li>
        <li style="cursor: pointer">你是猪</li>
        <li style="cursor: move;">你是猪</li>
        <li style="cursor: text;">你是猪</li>
        <li style="cursor: not-allowed;">你是猪</li>
    </ul>
    <input type="text" class="lunkuxian">
    <textarea name="" id="" cols="30" rows="10" class="lunkuoxian"></textarea>
    <div class="img">
        <img src="http://www.shudetang.com/template/conch/asset/img/load.gif" alt="">猪
        <span>你好</span>
    </div>
    <div class="hidden">
        你是亦何苦看书客户库函数风水堪舆一个月读书反馈回
    </div>
    <div class="hidden1">
        你是亦何苦看书客户库函数风水堪舆一个月读书反馈回
    </div>
</body>
</html>